<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="x-rim-auto-match" content="none">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>投资日历</title>
    <script src="js/jquery-1.10.2.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/iosSelect.js"></script>
    <link rel="stylesheet" href="css/iosSelect.css">
    <style>

        .bg{
            width:100%;
            /*background: #3c5365 url(img/calender.jpg) no-repeat;*/
            /*background-size: cover;*/
            /*color:#fff;*/
            min-height:100%;
        }
        .title{
            font-size:20px;
            text-align: center;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            height:67px;
            width:100%;
            line-height:67px;
            background: url(img/calender.png) no-repeat;
            background-position: right 23px top 22px;
            background-size: 25px;
            color:#878686;
        }
        tr th{
            color: #b2b2b2;
        }

        table{
            width:100%;

        }
        th{
            height:31px;
            font-size:12px;
        }
        tr{
            text-align: center;
            height:40px;
        }
        td{
            position: relative;
            z-index:1;
            /*color:#fff;*/
            color:#5e5d5d;
        }
        .invest:after{
            content:'';
            position: absolute;
            width:34px;
            height:34px;
            left:50%;
            top:3px;
            margin-left:-17px;
            border-radius:50%;
            border:1px solid #e05353;
            box-sizing: border-box;
        }
        .money:after{
            content:'';
            position: absolute;
            width:34px;
            height:34px;
            left:50%;
            top:3px;
            margin-left:-17px;
            border-radius:50%;
            border:1px solid #60d1fb;
            box-sizing: border-box;
        }
        .today{
            color:#fff;
        }
        .today:after{
            content:'';
            position: absolute;
            width:34px;
            height:34px;
            left:50%;
            top:3px;
            margin-left:-17px;
            border-radius:50%;
            /*border:1px solid #f18a12;*/
            border-right:1px solid #f18a12!important;
            border-bottom:1px solid #f18a12!important;
            border-left:1px solid #f18a12!important;
            border-top:1px solid #f18a12!important;
            box-sizing: border-box;
            background: #f18a12;
            z-index:-1;

        }
        .money-invest:after{
            content:'';
            position: absolute;
            width:34px;
            height:34px;
            left:50%;
            top:3px;
            margin-left:-17px;
            border-radius:50%;
            border-right:1px solid #60d1fb;
            border-bottom:1px solid #60d1fb;
            border-left:1px solid #e05353;
            border-top:1px solid #e05353;
            box-sizing: border-box;
            transform: rotate(-45deg);
        }

        .info{
            height:80px;
            width:100%;
            border-bottom:1px solid #fbfbfb;
            font-size:12px;
            color:#707071;
        }

        .info div{
            float: left;
            width:50%;
            position: relative;
            height:57px;
            padding:39px 0 2px 0;
            line-height:16px;
            text-align: center;
        }
        .info div:before{
            content:'';
            position: absolute;
            width:22px;
            height:22px;
            left:50%;
            top:13px;
            margin-left:-11px;
            border-radius:50%;
            box-sizing: border-box;
        }
        .info .hasInvestItem:before{
            border:1px solid #e05353;
        }
        .info .hasMoneyItem:before{
            border:1px solid #60d1fb;
        }
        .detailItem{
            height:47px;
            width:100%;
            font-size:15px;
            text-align: center;
            line-height:47px;
            color:#b9b9b9;

        }
        .bottomTable{
            table-layout:fixed;
            color:#707071;
            border-collapse :collapse;
            border-spacing :0;

        }
        .bottomTable td{
            text-align: center;
            width:33.3%;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;

        }
        .bottomTable th{
            background: #f6f5f5;
            font-weight:normal ;
            font-size:15px;
        }
        .bottomTable tr{
            height:36px;
            font-size:15px;
            width:100%;
            border-top:1px solid #e9e9e9;

        }
        .bottomTable tr:first-child{
            border-top: 0;
        }

        .leftbutton,.rightbutton{
            display: inline-block;
            width:40px;
            height:20px;
            position: relative;
        }
        .leftbutton:after,.rightbutton:after{
            content: '';
            display: inline-block;
            position: absolute;
            width: 0;
            height: 0;
            border-color: transparent #bababa;
            border-style: solid;
            top: 6px;
        }
        .leftbutton:after{
            border-width: 8px 15px 8px 0;
            right: 12px;
        }
        .rightbutton:after{
            border-width: 8px 0 8px 15px;
            left: 10px;
        }
        .pickDate{
           width:34px;
            height:34px;
            position: absolute;
            right:20px;
            top:17px;
        }
    </style>
</head>
<body>
<div class="bg">
    <div class="pickDate"  id="selectDate"></div>
    <div id="div1">
        <div id="nowTime"></div>
    </div>
    <div class="info">
        <div class="hasInvestItem">有投资的项目</div>
        <div class="hasMoneyItem">有回款的项目</div>
    </div>
    <div class="detailItem" id="detailItem">
    </div>

    <div class="paddingDiv">
        <table class="bottomTable" id="bottomTable">
        </table>
    </div>
</div>
</body>
<script>
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        var oNowTime = document.getElementById('nowTime');
        var aTd = oDiv.getElementsByTagName('td');
        var aNowSpan = oNowTime.getElementsByTagName('span');
        var oDate = new Date();
        var bottomTable=document.getElementById('bottomTable');
        var detailItem=document.getElementById('detailItem');
        var userId=decodeURI(window.location.href).split('?')[1];

        var u_token=decodeURI(window.location.href).split('?')[2];
        var a_token=decodeURI(window.location.href).split('?')[3];
        var clickDateArr = [];
        showDate(oNowTime,oDate.getFullYear(),oDate.getMonth()+1);
        hideLastTr();
        showBtn();

        function showDate(obj,year,month,bBtn){

            var oDate = new Date();
            var dayNum = 0;
            var lastMonthdayNum=0;

            if(!obj.bBtn){
                obj.oTitle = document.createElement('div');
                obj.oTitle.className = 'title';
                obj.appendChild(obj.oTitle);

                var oTable = document.createElement('table');
                var oThead = document.createElement('tHead');
                var oTr = document.createElement('tr');
                var arr = ['一','二','三','四','五','六','日'];
                for(var i=0;i<7;i++){
                    var oTh = document.createElement('th');
                    oTh.innerHTML = arr[i];
                    oTr.appendChild(oTh);
                }
                oThead.appendChild(oTr);
                oTable.appendChild(oThead);

                var oTbody = document.createElement('tBody');
                for(var i=0;i<6;i++){
                    var oTr = document.createElement('tr');
                    for(var j=0;j<7;j++){
                        var oTd = document.createElement('td');
                        oTr.appendChild(oTd);
                    }
                    oTbody.appendChild(oTr);
                }
                oTable.appendChild(oTbody);
                obj.appendChild(oTable);


                obj.bBtn = true;
            }

            obj.oTitle.innerHTML = ( '<div><span class="leftbutton"></span><span>'+year+'</span>年<span>'+month+'</span>月<span class="rightbutton"></span></div>');

            var aTd = obj.getElementsByTagName('td');
            for(var i=0;i<aTd.length;i++){
                aTd[i].innerHTML = '';
            }

            if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){
                dayNum = 31;
            }
            else if(month==4 || month==6 || month==9 || month==11){
                dayNum = 30;
            }
            else if(month==2 && isLeapYear(year)){
                dayNum = 29;
            }
            else{
                dayNum = 28;
            }

            if( month==5 || month==7 || month==10 || month==12){
                lastMonthdayNum = 30;
            }
            else if(month==2 ||month==1 || month==4 || month==6 ||month==8 || month==9 || month==11){
                lastMonthdayNum = 31;
            }
            else if(month==3 && isLeapYear(year)){
                lastMonthdayNum = 29;
            }
            else{
                lastMonthdayNum = 28;
            }

            oDate.setFullYear(year);
            oDate.setMonth(month-1);
            oDate.setDate(1);
            switch(oDate.getDay()){
                case 0:
                    for(var i=0;i<dayNum;i++){
                        aTd[i+6].innerHTML = i+1;
                    }
                        for(var k=0;k<6;k++){
                            aTd[k].style.color='';
                        }


                    var leftdayNum0=lastMonthdayNum-5;
                    for(var j=0;j<6;j++){
                        aTd[j].innerHTML=leftdayNum0++;
//                        aTd[j].style.color='#97929c';
                    }

                    break;
                case 1:
                    for(var i=0;i<dayNum;i++){
                        aTd[i].innerHTML = i+1;
                    }
                    for(var k=0;k<6;k++){
                        aTd[k].style.color='';
                    }
                    break;
                case 2:
                    for(var i=0;i<dayNum;i++){
                        aTd[i+1].innerHTML = i+1;
                    }
                    for(var k=0;k<6;k++){
                        aTd[k].style.color='';
                    }
                    aTd[0].innerHTML=lastMonthdayNum;
//                    aTd[0].style.color='#97929c';

                    break;
                case 3:
                    for(var i=0;i<dayNum;i++){
                        aTd[i+2].innerHTML = i+1;
                    }
                    for(var k=0;k<6;k++){
                        aTd[k].style.color='';
                    }
                    aTd[0].innerHTML=lastMonthdayNum-1;
                    aTd[1].innerHTML=lastMonthdayNum;
//                    aTd[0].style.color=aTd[1].style.color='#97929c';
                    break;
                case 4:
                    for(var i=0;i<dayNum;i++){
                        aTd[i+3].innerHTML = i+1;
                    }
                    for(var k=0;k<6;k++){
                    aTd[k].style.color='';
                }
                    aTd[0].innerHTML=lastMonthdayNum-2;
                    aTd[1].innerHTML=lastMonthdayNum-1;
                    aTd[2].innerHTML=lastMonthdayNum;
//                    aTd[0].style.color=aTd[1].style.color=aTd[2].style.color='#97929c';
                    break;
                case 5:
                    for(var i=0;i<dayNum;i++){
                        aTd[i+4].innerHTML = i+1;
                    }
                    for(var k=0;k<6;k++){
                        aTd[k].style.color='';
                    }
                    var leftdayNum5=lastMonthdayNum-3;
                    for(var j=0;j<4;j++){
                        aTd[j].innerHTML=leftdayNum5++;
//                        aTd[j].style.color='#97929c';
                    }
                    break;
                case 6:
                    for(var i=0;i<dayNum;i++){
                        aTd[i+5].innerHTML = i+1;
                    }
                    for(var k=0;k<6;k++){
                        aTd[k].style.color='';
                    }
                    var leftdayNum6=lastMonthdayNum-4;
                    for(var j=0;j<5;j++){
                        aTd[j].innerHTML=leftdayNum6++;
//                        aTd[j].style.color='#97929c';
                    }
                    break;

            }
            var dateString= year +'-'+ month;
            getShowDate(dateString)
        }

        function getShowDate(date){
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4) {
                    if (xmlhttp.status == 200) {
                        var getData = eval("(" + xmlhttp.responseText + ")");
                        var investListDate=[];
                        var repayListDate=[];
                        var repayList1=[];
                        var repayList2=[];

                        for(var i=0;i<getData.investList.length;i++){
                            investListDate.push(getData.investList[i].addtime);
                        }
                        for(var j=0;j<getData.repayList.length;j++){
                            if(getData.repayList[j].collectStatus==1){
                                repayList1.push(getData.repayList[j].actualCollectTime)
                            }
                            else{
                                repayList2.push(getData.repayList[j].collectTime)
                            }

                        }
                        repayListDate = repayList1.concat(repayList2);
                        console.log(repayListDate);
                        console.log(repayList1);
                        console.log(repayList2);
                        var newd=[];
                        var newE=[];

                        for(var k=0;k<investListDate.length;k++){
                            var d=new Date();
                            d.setTime(investListDate[k]);
                            newd.push(d);
                            showCircle(d,'invest')
                        }


                        for(var l=0;l<repayListDate.length;l++){
                            var e=new Date();
                            e.setTime(repayListDate[l]);
                            newE.push(e);
                            showCircle(e,'money')
                        }


                        for(var dd=0;dd<newd.length;dd++){
                            for(var ee=0;ee<newE.length;ee++){
                                if(newd[dd].getFullYear()==newE[ee].getFullYear() && newd[dd].getMonth()==newE[ee].getMonth() && newd[dd].getDate()==newE[ee].getDate()){
                                    showCircle(newd[dd],'money-invest')
                                }
                            }
                        }
                        var newtd = document.getElementsByTagName('td');
                        for(var i=0;i<newtd.length;i++){
                            newtd[i].onclick=null;
                        }
                        getShowList();
                    }

                }
            };
            xmlhttp.open("POST","/mobile/user/calendar", true);
            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
            xmlhttp.setRequestHeader("x-access-token",a_token);
            xmlhttp.setRequestHeader("x-user-token",u_token);
            xmlhttp.send('userId=' + userId + '&dateStr=' + date);
        }

        function getShowList(){
            clickDateArr=[];
            for(var ii=0;ii<aTd.length;ii++){
                if(aTd[ii].className.indexOf('invest')!=-1 || aTd[ii].className.indexOf('money')!=-1 || aTd[ii].className.indexOf('money-invest')!=-1){
                    clickDateArr.push(aTd[ii])
                }

            }

            for(var jj=0;jj<clickDateArr.length;jj++){

                clickDateArr[jj].onclick= function () {

                    for(var jjj=0;jjj<aTd.length;jjj++){
                        removeClass(aTd[jjj],'today');
                    }

                    addClass(this, 'today');
                    detailItem.innerHTML=""+aNowSpan[1].innerHTML+"年"+aNowSpan[2].innerHTML+"月"+this.innerHTML+"日的项目";
                    var viewDate=aNowSpan[1].innerHTML+'-'+aNowSpan[2].innerHTML+'-'+ this.innerHTML;
                    var xmlhttp = new XMLHttpRequest();
                    xmlhttp.onreadystatechange = function () {
                        if (xmlhttp.readyState == 4) {
                            if (xmlhttp.status == 200) {
                                var getData = eval("(" + xmlhttp.responseText + ")");
                                console.log(getData);
                                var investRepayHtml='';

                                for(var i=0;i<getData.investRepayList.length;i++){

                                    investRepayHtml+= "<tr><td>"+ getData.investRepayList[i].itemName +"</td><td>"+ getData.investRepayList[i].type +"："+ getData.investRepayList[i].itemCycle +"天</td><td>" + getData.investRepayList[i].amount + "元</td></tr>"
                                }


                                bottomTable.innerHTML='<tr><th>项目</th><th>状态</th><th>金额</th></tr>'+investRepayHtml;

                            }

                        }
                    };
                    xmlhttp.open("POST","/mobile/user/calendarList", true);
                    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
                    xmlhttp.setRequestHeader("x-access-token",a_token);
                    xmlhttp.setRequestHeader("x-user-token",u_token);
                    xmlhttp.send('userId=' + userId+'&viewDate=' + viewDate);
                }
            }

            if(clickDateArr.length>0){
                for(var i=0;i<clickDateArr.length;i++){
                    if(clickDateArr[i].innerHTML==oDate.getDate() && aNowSpan[1].innerHTML == oDate.getFullYear() && aNowSpan[2].innerHTML == oDate.getMonth()+1){
                        clickDateArr[i].click()
                    }
                }
            }
           showCircle(oDate,'today');
        }

        function hasClass(obj, cls) {
            return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
        }

        function addClass(obj, cls) {
            if (!hasClass(obj, cls))
                obj.className += " " + cls;
        }

        function removeClass(obj, cls) {
            if (hasClass(obj, cls)) {
                var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
                obj.className = obj.className.replace(reg, ' ');
            }
        }

        function showCircle(date,className){
            var result = [];

            var index=0;
            for(var i=0;i<aTd.length;i++){
                if(aTd[i].innerHTML==1){
                    index=i;
                }
            }

            for(var j=index;j<aTd.length-index;j++)
                if(aTd[j].innerHTML!=''){
                    result.push(aTd[j]);
                }

            if(aNowSpan[1].innerHTML == date.getFullYear() && aNowSpan[2].innerHTML == date.getMonth()+1 ) {
                for (var k = 0; k < result.length; k++) {
                    if ( date.getDate() == result[k].innerHTML) {
                        addClass(result[k],className)


                    }
                }
            }

        }

        function isLeapYear(year){
            if(year%4==0 && year%100!=0){
                return true;
            }
            else{
                if(year%400==0){
                    return true;
                }
                else{
                    return false;
                }
            }
        }

        function showBtn(){
            detailItem.innerHTML='';
            bottomTable.innerHTML='';
            var Month = parseInt(aNowSpan[2].innerHTML);
            var Year = parseInt(aNowSpan[1].innerHTML);
            aNowSpan[0].onclick = function(){

                if(Month==10 && Year==2015){
                    this.onclick=null;
                    return
                }


                for(var i=0;i<aTd.length;i++){
                    aTd[i].className='';

                }

                if(Month == 1){
                    showDate(oNowTime,Year-1,12);
                }
                else{
                    showDate(oNowTime,Year,Month-1);
                }
                showBtn();
                hideLastTr();
//                getShowDate();
            };

            aNowSpan[3].onclick = function(){
                for(var i=0;i<aTd.length;i++){
                    aTd[i].className='';

                }
                if(Month == 12){
                    showDate(oNowTime,Year+1,1);
                }
                else{
                    showDate(oNowTime,Year,Month+1);
                }

                showBtn();
                hideLastTr();
//                getShowDate();
            };

        }

        function hideLastTr(){
            var bBtn = true;
            for(var i=35;i<42;i++){
                if(aTd[i].innerHTML!=''){
                    bBtn = false;
                }
            }

            if(bBtn){
                for(var i=35;i<42;i++){
                    aTd[i].parentNode.style.display = 'none';
                }
            }
            else{
                for(var i=35;i<42;i++){
                    aTd[i].parentNode.style.display = '';
                }
            }

        }



        var selectDateDom = $('#selectDate');
        // 初始化时间
        var now = new Date();
        var nowYear = now.getFullYear();
        var nowMonth = now.getMonth() + 1;
        aNowSpan[1].innerHTML=nowYear;
        aNowSpan[2].innerHTML=nowMonth;

        // 格式化年
        function formatYear (nowYear) {
            var arr = [];
            for (var i = 2015; i <= nowYear + 8; i++) {
                arr.push({
                    id: i + '',
                    value: i + '年'
                });
            }
            return arr;
        }
        // 格式化月
        function formatMonth (startMonth) {
            var arr = [];
            for (var i = startMonth; i <= 12; i++) {
                arr.push({
                    id: i + '',
                    value: i + '月'
                });
            }
            return arr;
        }


        // 年数据，方法
        var yearData = function () {
            return formatYear(nowYear);
        };
        // 月数据，方法
        var monthData = function (year) {
            if(year==2015){
                return formatMonth(10);
            }else{
                return formatMonth(1);
            }

        };

        selectDateDom.bind('click', function () {
            var oneLevelId = aNowSpan[1].innerHTML;
            var twoLevelId = aNowSpan[2].innerHTML;
            var iosSelect = new IosSelect(2,
                    [yearData, monthData],// 这里传入的是方法
                    {
                        title: '日期选择',
                        itemHeight: 35,
                        oneTwoRelation: 1,
                        twoThreeRelation: 1,
                        oneLevelId: oneLevelId,
                        twoLevelId: twoLevelId,
                        callback: function (selectOneObj, selectTwoObj) {
                            aNowSpan[1].innerHTML=selectOneObj.id;
                            aNowSpan[2].innerHTML=selectTwoObj.id;

                            detailItem.innerHTML='';
                            bottomTable.innerHTML='';
                            for(var i=0;i<aTd.length;i++){
                                aTd[i].className='';

                            }
                            showDate(oNowTime,selectOneObj.id,selectTwoObj.id);
                            showBtn();
                            hideLastTr();
                        }
                    });
        });

    };
</script>
</html>